<template>
  <div class="login">
    <EBackground />
    <div class="panel">
      <div class="panel-left">
        <img src="@/assets/imgs/bg.png" />
        <img src="@/assets/imgs/enfi.png" />
        <div class="shadow"></div>
      </div>
      <div class="panel-right">
        <div class="sys-title">
          <div>欢迎登录</div>
          <div>门户系统</div>
        </div>
        <a-form-model @keyup.enter.native="handleLogin">
          <a-input
            ref="username"
            v-model="username"
            placeholder="用户名"
            :disabled="loading"
          >
            <img slot="prefix" src="@/assets/imgs/user.png" />
          </a-input>
          <a-input-password
            ref="password"
            v-model="password"
            placeholder="密码"
            :disabled="loading"
          >
            <img slot="prefix" src="@/assets/imgs/password.png" />
          </a-input-password>
          <a-button type="primary" :loading="loading" @click="handleLogin"
            >登录</a-button
          >
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import config from '@/helper/config'
import { getAuthCode } from '@/api'
// import store from '@/store'

export default {
  name: 'Login',
  data () {
    return {
      username: 'admin',
      password: '123456',
      loading: false
    }
  },
  mounted () {
    this.$refs.username.focus()
  },
  methods: {
    ...mapActions(['login', 'initPermission']),
    async handleLogin () {
      if (this.loading) return false
      this.loading = true
      try {
        await this.login({ username: this.username, password: this.password })
        config.systemType === 'sso' ? this.$router.push('/sso') : this.$router.push({ name: 'default' })
        this.$helper.msg.success('登录成功')
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  },
  beforeRouteLeave: async (to, from, next) => {
    if (from.query.client_id) {
      const params = {
        ...from.query,
        response_type: 'code'
      }
      const { data } = await getAuthCode(params)
      window.open(data.redirectUrl, '_self')
    } else {
      next()
    }

    // 统一认证逻辑直接放到子系统------
    // const params = {
    //   client_id: config.clientId,
    //   redirect_uri: config.redirectUri,
    //   response_type: 'code'
    // }
    // const { data } = await getAuthCode(params)
    // window.open(data.redirectUrl, '_self')
  }
}
</script>

<style lang="stylus" scoped>
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #EFF4FF;

  .panel {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .panel-left {
      width: 740px;
      height: 550px;
      border-radius: 24px 0 0 24px;
      background: linear-gradient(135deg, #51B1FF, #6265D6);
      position: relative;

      .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      img {
        position: absolute;

        &:nth-child(1) {
          width: 100%;
          height: 100%;
        }

        &:nth-child(2) {
          left: 20px;
          transform: scale(0.9);
        }
      }
    }

    .panel-right {
      width: 412px;
      height: 604px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 24px;
      padding: 60px;

      .sys-title {
        margin-top: 20px;
        margin-bottom: 80px;

        div {
          &:nth-child(1) {
            color: #999;
            font-size: 16px;
            line-height: 30px;
          }

          &:nth-child(2) {
            color: #000;
            font-size: 30px;
            line-height: 50px;
          }
        }
      }

      .ant-input-prefix img {
        margin-left: 5px;
        width: 15px;
        height: 16px;
      }

      .ant-input-affix-wrapper >>> .ant-input {
        height: 42px;
        margin: 10px 0;
        border-radius: 24px;
        // padding 20px
        padding-left: 45px;
      }

      .ant-btn {
        width: 100%;
        border-radius: 24px;
        margin-top: 60px;
        height: 42px;
      }
    }
  }
}
</style>
